// ignore_for_file: sized_box_for_whitespace

import 'package:anmo_app/common/index.dart';
import 'package:anmo_app/gen/assets.gen.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'index.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

class HomePage extends GetView<HomeController> {
  const HomePage({Key? key}) : super(key: key);

  // 主视图
  Widget _buildView() {
    return Stack(
      children: [
        Container(
          // height: Get.height,
          width: Get.width,
          color: Colors.red,
          child: Image.asset(Assets.images.homeTopBg.path,
              alignment: Alignment.topCenter),
        ),
        Column(
          children: [
            _topTabbarWidget(),
            Expanded(
                child: ListView(
              padding: EdgeInsets.symmetric(horizontal: 24.w),
              children: [
                Container(
                  width: Get.width - 48.w,
                  height: 225.h,
                  child: _buildDotsBarSwiper(),
                ),
                _centerMenuWidget(),
                Container(
                  padding: EdgeInsets.all(24.w),
                  // height: 1382.5.h,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15.w),
                      color: Colors.white),
                  child: Column(
                    children: [
                      _bottomHotTopWidget(),
                      _storeItemWidget(),
                      _storeItemWidget(),
                      _storeItemWidget(),
                      Column(
                        children: [
                          Container(
                            margin: EdgeInsets.symmetric(vertical: 25.5.h),
                            child: Row(
                              children: [
                                Stack(
                                  children: [
                                    TDImage(
                                      imgUrl: demoImg,
                                      width: 169.5.w,
                                      height: 246.h,
                                      type: TDImageType.roundedSquare,
                                    ),
                                    Positioned(
                                        bottom: 0,
                                        right: 0,
                                        left: 0,
                                        height: 50.h,
                                        child: Container(
                                          decoration: BoxDecoration(
                                              gradient: LinearGradient(colors: [
                                                Color(0xff37FF7E),
                                                Color(0xff01BA7A)
                                              ]),
                                              borderRadius:
                                                  BorderRadius.circular(10.w)),
                                          alignment: Alignment.center,
                                          child: Text(
                                            '平台优质技师',
                                            style: AppTextThem.boldStyle
                                                .copyWith(color: Colors.white),
                                          ),
                                        ))
                                  ],
                                ),
                                Column(
                                  children: [
                                    _qualityTechniciansItemWidget(0),
                                    _qualityTechniciansItemWidget(1),
                                    _qualityTechniciansItemWidget(2)
                                  ],
                                )
                              ],
                            ),
                          ),
                          TDDivider()
                        ],
                      ),
                      _storeItemWidget(),
                      _storeItemWidget(),
                      Container(
                        height: 60.h,
                        alignment: Alignment.bottomCenter,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(
                              '更多店铺',
                              style: AppTextThem.regularStyle.copyWith(
                                  color: Color(0xff999999), fontSize: 22.sp),
                            ),
                            SizedBox(width: 9.w),
                            TDImage(
                              assetUrl: Assets.images.toRightIcon.path,
                              width: 8.5.w,
                              height: 15.h,
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                )
              ],
            ))
          ],
        ),
      ],
    );
  }

  Container _qualityTechniciansItemWidget(index) {
    return Container(
      width: Get.width - 96.w - 170.w,
      padding: EdgeInsets.only(left: 24.w),
      child: Column(
        children: [
          SizedBox(height: 15.5.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '泰式意境SPA',
                    style: AppTextThem.boldStyle.copyWith(fontSize: 22.sp),
                  ),
                  Text(
                    '时常 60 分钟',
                    style: AppTextThem.regularStyle
                        .copyWith(color: Color(0xff999999)),
                  ),
                ],
              ),
              GestureDetector(
                child: Container(
                  width: 117.w,
                  height: 37.5.h,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(18.75.h),
                    color: AppColor.mainColor,
                  ),
                  alignment: Alignment.center,
                  child: Text(
                    '￥168 购买',
                    style: AppTextThem.boldStyle.copyWith(color: Colors.white),
                  ),
                ),
              )
            ],
          ),
          SizedBox(height: 15.5.h),
          index == 2 ? Container() : TDDivider()
        ],
      ),
    );
  }

  Widget _storeItemWidget() {
    return Column(
      children: [
        Container(
          margin: EdgeInsets.symmetric(vertical: 25.5.h),
          child: Row(
            children: [
              TDImage(
                imgUrl: demoImg,
                type: TDImageType.roundedSquare,
                width: 141.w,
                height: 141.w,
              ),
              Container(
                margin: EdgeInsets.only(left: 15.w),
                height: 141.h,
                width: Get.width - 96 - 75,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '无为足道',
                          style:
                              AppTextThem.boldStyle.copyWith(fontSize: 25.sp),
                        ),
                        Row(
                          children: [
                            TDImage(
                              assetUrl: Assets.images.iconLoaction.path,
                              width: 14.w,
                              height: 17.5.h,
                            ),
                            SizedBox(width: 6.w),
                            Text(
                              '1.7km',
                              style: AppTextThem.regularStyle.copyWith(
                                  fontSize: 16.sp,
                                  color: AppColor.secondaryText),
                            )
                          ],
                        )
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          width: 150.w,
                          height: 23.h,
                          decoration: BoxDecoration(
                              color: Color(0xffFFB323),
                              borderRadius: BorderRadius.circular(4.5.h)),
                          child: Stack(
                            children: [
                              Positioned(
                                left: 0,
                                width: 85.5.w,
                                top: 0,
                                bottom: 0,
                                child: Container(
                                    width: 85.5.w,
                                    height: 23.h,
                                    decoration: BoxDecoration(
                                        gradient: LinearGradient(colors: [
                                          Color(0xffFF7000),
                                          Color(0xffFFB323)
                                        ]),
                                        borderRadius:
                                            BorderRadius.circular(4.5.h)),
                                    alignment: Alignment.center,
                                    child: Text(
                                      '签约商家',
                                      textAlign: TextAlign.center,
                                      style: AppTextThem.regularStyle.copyWith(
                                          color: Colors.white,
                                          fontSize: 16.5.sp),
                                    )),
                              ),
                              Positioned(
                                right: 0,
                                width: 64.2.w,
                                top: 0,
                                bottom: 0,
                                child: Container(
                                    width: 64.2.w,
                                    height: 23.h,
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        color: Color(0xffFFE5BA),
                                        borderRadius:
                                            BorderRadius.circular(4.5.h)),
                                    child: Text(
                                      '已认证',
                                      textAlign: TextAlign.center,
                                      style: AppTextThem.regularStyle
                                          .copyWith(fontSize: 15.sp),
                                    )),
                              )
                            ],
                          ),
                        ),
                        Text(
                          '近期服务 1000+ 单',
                          textAlign: TextAlign.center,
                          style: AppTextThem.regularStyle.copyWith(
                              color: Color(0xffF36F00), fontSize: 16.5.sp),
                        )
                      ],
                    ),
                    Text(
                      '正规绿色服务！(24小时核酸）从事推拿行业12年，擅长推拿养推精油SPA，全...',
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      // textAlign: TextAlign.center,
                      style: AppTextThem.regularStyle.copyWith(
                          color: Color(0xff999999), fontSize: 18.5.sp),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
        TDDivider()
      ],
    );
  }

  Row _bottomHotTopWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          '热门',
          style: AppTextThem.boldStyle.copyWith(fontSize: 25.sp),
        ),
        Container(
          height: 48.h,
          width: 137.w,
          decoration: BoxDecoration(
              color: const Color(0xffF8F8F8),
              borderRadius: BorderRadius.circular(12.h)),
          child: Stack(
            children: [
              Obx(() => AnimatedPositioned(
                    top: 3.h,
                    left:
                        controller.bottomSegIndex.value == 0 ? 3.h : 137.w / 2,
                    width: 65.w,
                    height: 42.h,
                    duration: Duration(milliseconds: 100),
                    child: Container(
                      width: 65.w,
                      height: 42.h,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12.h),
                        color: const Color.fromARGB(255, 255, 255, 255),
                      ),
                    ),
                  )),
              Container(
                margin: EdgeInsets.only(top: 3.h),
                color: Colors.transparent,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    GestureDetector(
                      onTap: () {
                        controller.bottomSegIndex.value = 0;
                      },
                      child: Container(
                          alignment: Alignment.center,
                          height: 42.h,
                          width: (137.w - 3.h) / 2,
                          color: Colors.transparent,
                          child: Obx(() => Text(
                                '技师',
                                style: AppTextThem.regularStyle.copyWith(
                                    fontSize: 18.5.sp,
                                    color: controller.bottomSegIndex.value == 1
                                        ? const Color(0xff999999)
                                        : AppColor.mainColor),
                              ))),
                    ),
                    GestureDetector(
                      onTap: () {
                        controller.bottomSegIndex.value = 1;
                      },
                      child: Container(
                          alignment: Alignment.center,
                          height: 42.h,
                          width: (137.w - 3.h) / 2,
                          color: Colors.transparent,
                          child: Obx(() => Text(
                                '商户',
                                style: AppTextThem.regularStyle.copyWith(
                                    fontSize: 18.5.sp,
                                    color: controller.bottomSegIndex.value == 0
                                        ? const Color(0xff999999)
                                        : AppColor.mainColor),
                              ))),
                    ),
                  ],
                ),
              ),
            ],
          ),
        )
      ],
    );
  }

  Container _centerMenuWidget() {
    return Container(
      height: 170.h,
      width: Get.width - 48.w,
      margin: EdgeInsets.symmetric(vertical: 15.h),
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(15.w)),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: 100.h,
            width: Get.width - 48.w,
            decoration: const BoxDecoration(color: Colors.transparent),
            child: ListView.builder(
                padding: EdgeInsets.symmetric(horizontal: 27.w),
                scrollDirection: Axis.horizontal,
                itemCount: 7,
                itemBuilder: (ctx, index) {
                  return Container(
                    // color: Colors.red,
                    margin: EdgeInsets.only(right: index == 6 ? 0 : 42.5.w),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          Assets.images.tuinaliliao.path,
                          width: 62.w,
                          height: 62.w,
                        ),
                        SizedBox(height: 13.5.h),
                        Text('推拿调理',
                            style: AppTextThem.regularStyle
                                .copyWith(fontSize: 18.5.sp))
                      ],
                    ),
                  );
                }),
          ),
          Container(
            margin: EdgeInsets.only(top: 20.h),
            height: 3.h,
            width: 33.w,
            decoration: BoxDecoration(
                color: const Color(0xffE5F8F1),
                borderRadius: BorderRadius.circular(1.5.w)),
            child: Container(
              height: 3.h,
              width: 10.w,
              margin: EdgeInsets.only(left: 0, right: 13.w),
              decoration: BoxDecoration(
                  color: AppColor.mainColor,
                  borderRadius: BorderRadius.circular(1.5.w)),
            ),
          )
        ],
      ),
    );
  }

  Container _topTabbarWidget() {
    return Container(
      margin: EdgeInsets.only(top: 40),
      height: 80.h,
      padding: EdgeInsets.only(left: 36.w),
      width: Get.width,
      child: Stack(
        children: [
          Positioned(
            top: 0,
            height: 45.h,
            left: 0,
            right: 0,
            child: Container(
              height: 45.h,
              // color: Colors.blue,
              child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: 2,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: () {
                        controller.topTabIndex.value = index;
                      },
                      child: Obx(
                        () => Container(
                            // color: Colors.red,
                            margin: EdgeInsets.only(
                                right: controller.topTabIndex.value == index
                                    ? 12.w
                                    : 0),
                            width: 70.w,
                            height: 45.h,
                            alignment: Alignment.bottomLeft,
                            child: Text(['推荐', '发现'][index],
                                textAlign: TextAlign.left,
                                style: AppTextThem.regularStyle.copyWith(
                                  fontWeight:
                                      controller.topTabIndex.value == index
                                          ? FontWeight.bold
                                          : FontWeight.normal,
                                  fontSize:
                                      controller.topTabIndex.value == index
                                          ? 33.sp
                                          : 25.sp,
                                  color: controller.topTabIndex.value == index
                                      ? AppColor.titleColor
                                      : AppColor.secondaryText,
                                ))),
                      ),
                    );
                  }),
            ),
          ),
          Obx(() => AnimatedPositioned(
              left: controller.topTabIndex.value == 0
                  ? (70 / 2 - 6).w
                  : (140 - 24 - 18).w,
              top: (45 + 5).h,
              width: 12.w,
              height: 4.5.h,
              child: Container(
                height: 4.5.h,
                width: 12.w,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(2.25.h),
                    // color: Colors.red,
                    gradient: const LinearGradient(colors: [
                      Color(0xff37FF7E),
                      Color(0xff01BA7A),
                    ])),
              ),
              duration: const Duration(milliseconds: 100)))
        ],
      ),
    );
  }

  Widget _buildDotsBarSwiper() {
    return Swiper(
      autoplay: true,
      itemCount: 6,
      loop: true,
      pagination: const SwiperPagination(
          alignment: Alignment.bottomCenter,
          builder: TDSwiperPagination.dotsBar),
      itemBuilder: (BuildContext context, int index) {
        return TDImage(
          imgUrl: demoImg,
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeController>(
      builder: (_) {
        return Scaffold(
          // appBar: AppBar(title: const Text("home")),
          extendBodyBehindAppBar: true,
          backgroundColor: AppColor.bodyBackColor,
          body: _buildView(),
        );
      },
    );
  }
}
